<template>
	<view>
		<view class="page_top">
			<text>巡检</text>
		</view>
		<view class="page_tabr">
			<!-- <u-tabs :list="tabsList" @click="tabsClick" :lineWidth="50"></u-tabs> -->
			<view class="tabr_list">
				<view class="tabr_cell" v-for="item in tabsList" :key="item.value"
				@click="selectTabr(item)" :class="{'select_tabr':curBar==item.value}">
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>

		<scroll-view scroll-y="true" class="page_scroll_box" :refresher-enabled="true"
			:refresher-triggered="scrollData.triggered" @scrolltolower="addMore" @refresherrefresh="regetList(true)">
			<view class="card-content">
				<uni-card :title="item.userName" v-for="item in tableData" :key="item.id"
					@click="toDetail(item)">
					<view style="display:flex;justify-content: space-between;align-items: center;">
						<text class="uni-body">{{item.taskName || item.modelName}}</text>
						<u-tag :text="item.status==0?'未完成':'已完成'" :type="item.status==0?'error':'success'"></u-tag>
					</view>
				</uni-card>
				
				<view class="empty_box" v-if="tableData.length < 1">
					<u-empty mode="data" text="暂无巡检事件">
					</u-empty>
				</view>
			</view>
		</scroll-view>




	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs
	} from 'vue';
	import {
		inspaServiceNet,
		inspaBase
	} from '@/api/inspestion.js'
	import {
		onLoad, onShow
	} from '@dcloudio/uni-app'

	onLoad(async () => {
		await getList()

	})

	const scrollData = reactive({
		triggered: false
	})

	const data = reactive({
		tabsList: [{
			name: "基础环境巡检", value: "0"
		}, {
			name: "网络巡检", value: "1"
		}, {
			name: "服务器巡检", value: "2"
		}],
		curBar: "0",
		queryParams: {
			pageSize: 10,
			pageNum: 1,
			type: 0
		},
		tableData: []
	})
	const {
		tabsList,
		curBar,
		queryParams,
		tableData
	} = toRefs(data)
	/* tabs 切换 */
	function selectTabr(item) {
		curBar.value = item.value
		queryParams.value.type = curBar.value
		regetList(false)
	}

	/* to详情 */
	const toDetail = (item) => {
		/* inspecType  0 基础环境  1网络  2服务器 */
		if(curBar.value === '0') {
			uni.navigateTo({
				url: `/pages/inspection/InspecDetail?id=${item.id}&inspecType=${queryParams.value.type}`
			})
		} else {
			uni.navigateTo({
				url:`/pages/inspection/sidnInspecDetail?id=${item.id}&type=${queryParams.value.type}`
			})
		}
		
	}

	function addMore() {
		queryParams.value.pageNum++
		getList()
	}

	function regetList(triggered = true) {
		scrollData.triggered = triggered
		queryParams.value.pageNum = 1
		tableData.value = []
		getList()
	}

	const getList = () => {
		if (queryParams.value.type == 0) {
			getBase()
		} else {
			getServiveNet()
		}
	}

	/* 获取网络和服务区详情 */
	const getServiveNet = async () => {
		/* 类型 1：网络 2：服务器 （基础环境巡检不需要传） */
		const res = await inspaServiceNet({
			...queryParams.value
		})

		scrollData.triggered = false
		tableData.value = [...tableData.value,...res.rows]
	}
	const getBase = async () => {
		const res = await inspaBase({
			...queryParams.value
		})
		scrollData.triggered = false
		tableData.value = [...tableData.value,...res.rows]
	}
	
	onShow(()=>{
		if(uni.getStorageSync("reget")) {
			regetList(false)
		}
	})
</script>

<style lang="scss" scoped>
	.page_top {
		width: 100%;
		height: calc(var(--status-bar-height) + 88rpx);
		padding-top: var(--status-bar-height);
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #F8F8F8;
		position: relative;

		.sign_out {
			position: absolute;
			top: calc(50% + var(--status-bar-height));
			right: 32rpx;
			transform: translateY(-50%);
			font-size: 24rpx;
			color: #3366FF;
		}
	}
	
	.page_tabr {
		background-color: #fff;
		width: 100%;
		height: 80rpx;
		padding: 12rpx 60rpx;
		.tabr_list {
			width: 100%;
			height: 100%;
			background-color: #F8F8F8;
			display: flex;
			align-items: center;
			position: relative;
			.tabr_cell {
				height: 100%;
				flex: 1;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
			}
			.select_tabr {
				background-color: #70edf8;
			}
		}
	}

	.page_scroll_box {
		width: 100%;
		height: calc(100vh - var(--status-bar-height) - 88rpx - 80rpx);

		.page_scroll_content {
			min-height: 100%;
			padding: 30rpx;
		}
	}

	:deep(.uni-card__header) {
		>text:nth-child(1) {
			flex: 2;
		}
	}
	
	.empty_box {
		margin-top: 20vh;
	}
</style>